<template>
<div class="person_ye">
    <van-nav-bar
	  title="实名制认证"
	  style="background:#ffffff;"
	  left-arrow
    @click-left="onClickLeft"
      v-if="time_show"
	 />
    <van-nav-bar
	  title="个人认证"
	  style="background:#ffffff;"
	  left-arrow
    @click-left="onClickLeft"
      v-if="timeb_show"
	 />
    <van-nav-bar
	  title="企业认证"
	  style="background:#ffffff;"
	  left-arrow
    @click-left="onClickLeft"
      v-if="timea_show"
	 />
    <div class="changeImg">
        <img src="../../assets/person.png"  v-show="person_show" @click="person_content"/>
	 	    <img src="../../assets/nperson.png" v-show="!person_show" @click="person_content"/>
	 	    <span style="display: inline-block;line-height:16vh;color:#CCCCCC;">或</span>
        <img src="../../assets/gongsi.png"  v-show="gongsi_show" @click="gongsi_content">
        <img src="../../assets/ngongsi.png"  v-show="!gongsi_show" @click="gongsi_content" />
    </div>
    <div style="margin:0;padding:0;display: flex;justify-content: space-around;margin-top: -2vh;">
        <p style="margin:0;padding:0;font-size: 0.8rem;margin-bottom: 1.5vh;">个人认证</p>
        <p style="margin:0;padding:0;font-size: 0.8rem;margin-bottom: 1.5vh;">企业认证</p>
    </div>
    <!-- 个人 -->
        <van-cell-group v-if="timeb_show">
            <van-field
                v-model="g_type"
                label="机构类型"
                placeholder="请选择您所在的机构类型"
                readonly
                @click="show_g_type = true"
                />
                <van-popup v-model="show_g_type" position="bottom">
                <van-picker
                  show-toolbar
                 :columns = "enterprise_type_arr"
                  @cancel="show_g_type = false"
                  @confirm="onConfirm_g_type"
                />
                </van-popup>
          <van-field
                v-model="en_name"
                label="机构名称"
                placeholder="请选择您所在的机构名称"
                readonly
                @click="show_gg_type = true"
                />
                <van-popup v-model="show_gg_type" position="bottom">
                  <van-picker
                    show-toolbar
                   :columns = "ggarbagetypes"
                    @cancel="show_gg_type = false"
                    @confirm="onConfirm_gg_type"
                  />
                </van-popup>

          <van-field
            v-if="show_shen_fen"
            v-model="role_text"
            label="身份"
            readonly
            placeholder="请选择身份"
            @click="show_role_type = true"
          />
          <van-popup v-model="show_role_type" position="bottom">
            <van-picker
              show-toolbar
              :columns = "role_arr"
              @cancel="show_role_type = false"
              @confirm="onConfirm_role_type"
            />
          </van-popup>


            <p style="margin:1vh 9vw; font-size:0.75rem; text-align:left; color:#FF4242;">注：认证成功后不可修改</p>
            <van-button
                    type="primary"
                    size="large"
                    @click="geren_renzheng"
                    style="background: #4C9FFD;border:1px solid #4C9FFD;width: 70%;border-radius: 60px;margin-top:25vh">
                    去认证
            </van-button>
        </van-cell-group>



    <!-- 企业 -->
        <van-cell-group v-if="timea_show">
            <van-field
                v-model="pg_type"
                label="机构名称"
                placeholder="请选择您所在的机构名称"
                readonly
                @click="show_g_type = true"
                />
                <van-popup v-model="show_g_type" position="bottom">
                <van-picker
                  show-toolbar
                 :columns = "pgarbagetypes"
                  @cancel="show_g_type = false"
                  @confirm="onpConfirm_g_type"
                />
                </van-popup>
            <p style="margin:1vh 9vw; font-size:0.75rem; text-align:left; color:#FF4242;">注：认证成功后不可修改</p>
            <van-button
                    type="primary"
                    size="large"
                    @click="qiye_renzheng"
                    style="background: #4C9FFD;border:1px solid #4C9FFD;width: 70%;border-radius: 60px;margin-top:25vh;">
                    去认证
            </van-button>
        </van-cell-group>
  </div>
</template>
<script>


export default {
	data(){
        return{
            //弹出层1
            g_type:'',
            g_type_val:'',
            show_g_type:false,
            idCardNo:'',
            garbagetypes:['学校','政府','机构'],
            //弹出层1
            gg_type:'',
            gg_type_val:'',
            show_gg_type:false,
            idCardNog:'',
            ggarbagetypes:[],

            //弹出层2
            pg_type:'',
            pg_type_val:'',
            pgarbagetypes:[],
            //图片显隐及问题显隐
            gongsi_show:false,
            person_show:false,
            timea_show:false,
            timeb_show:false,
            time_show:true,

            enterprise_type_arr:[],
            d_value:'',
            user:'',
            en_id:'',
            en_name:'',
            show_role_type:false,
            role_arr:["学生","教职员工"],
            show_shen_fen:false,
            role:'',
            role_text:'',
            d_value2:''
        }
    },
    mounted:function(){
        let local_user = localStorage.getItem('user');
        if(local_user != undefined && local_user != "undefined"){
            let user = JSON.parse(local_user);
            this.user = user;
        }
      this.get_enter_type();
    },
    methods:{
        onClickLeft(){
            this.$router.go(-1);
        },
        geren_renzheng(){
            console.log("个人认证");
            console.log(this.d_value);
            console.log(this.en_id);
            console.log(this.role);
            if(this.d_value ===''){
                this.$toast("请选择机构类型");
                return false;
            }
            if(this.en_id =='' || this.en_id ==undefined || this.en_id =='undefined'){
                this.$toast("请选择机构");
                return false;
            }
            if(this.d_value ==0){
                if(this.role =='' || this.role ==undefined || this.role =='undefined'){
                    this.$toast("请选择角色");
                    return false;
                }
            }

            this.$router.push({
                path:'/Authenticaren',
                query:{en_id:this.en_id,d_value:this.d_value,role:this.role,en_name:this.en_name}
            })

        },
        qiye_renzheng(){
            const that = this;
            if(this.d_value2 ===''){
                this.$toast("请选择机构类型");
                return false;
            }
            that.$router.push({
                path:'/Enterprisecation',
                query:{d_value:this.d_value2}
            })

        },
        get_enter_type(){
            const that = this;
            this.$sendRequest('/v2/get_enter_type',"vId="+that.user.villageId).then(function(res){
                console.log(res.data);
                var enterprise_type = res.data.result.enterprise_type;
                that.enterprise_type_arr=[];
                that.pgarbagetypes=[];
                for(var i =0;i<enterprise_type.length;i++){
                    that.enterprise_type_arr.push(enterprise_type[i].d_name);
                    that.pgarbagetypes.push(enterprise_type[i].d_name)
                }

            })
        },
        get_enter_prises(){
            const that = this;
            let p = "villageId="+that.user.villageId+"&d_value="+that.d_value;
            console.log(p);
            that.$sendRequest('/v2/get_enter_prises',p).then(function(res){
                console.log(res.data);
                that.ggarbagetypes=[];
                var enterprises = res.data.result.enterprises;
                for(var i = 0;i<enterprises.length;i++){
                  var obj = {};
                  obj.text=enterprises[i].en_name;
                  obj.en_id = enterprises[i].en_id;
                  that.ggarbagetypes.push(obj);
                }


            })
        },
        onConfirm_role_type(picker,index){
            console.log(picker);
            this.role = index+1;
            this.role_text = picker;
            this.show_role_type = false;

        },
        onConfirm_g_type(picker,index) {
            this.g_type = picker;
            this.d_value = index;
            this.show_g_type = false;
            this.get_enter_prises();
            if(index ==0){
                this.show_shen_fen = true;
            }else{
                this.show_shen_fen = false;
            }


        },
        onConfirm_gg_type(picker) {
            console.log(picker);
            this.en_name = picker.text;
            this.en_id = picker.en_id;
            this.show_gg_type = false;
        },
        onpConfirm_g_type(picker,index) {
            this.pg_type = picker;
            this.d_value2 = index;
            this.show_g_type = false;
        },
        person_content(){
            this.gongsi_show=false;
            this.person_show=true;
            this.timeb_show = true;
            this.timea_show = false;
            this.time_show = false;
	    },
        gongsi_content(){
            this.gongsi_show=true;
            this.person_show=false;
            this.timea_show = true;
            this.timeb_show = false;
            this.time_show = false;
        }
    }
}
</script>
<style scoped="scoped">
  .person_ye{

    height:100vh;
  }

 .person_ye >>> .van-nav-bar__title{
      color: #000000;
  }
    .van-nav-bar__title{
        color: #fff;
    }
    .changeImg{
        display: flex;
        margin-top: 8vh;
        justify-content: space-around;
        margin: 24px;
    }
    .changeImg img{
        width: 34vw;
        height: 19vh;
    }
    .person_ye >>> .van-icon-arrow-left{
		color: #000000;
	}
    .van-hairline--top-bottom::after{
        border: 0 solid #ffffff;
    }
</style>
